<template>
  <div class="app-container" v-loading="loading">
    <FormList
      v-model:formRef="formDialogId"
      v-model:formModel="formDialogModel"
      :initForm="initDialogForm"
    ></FormList>
    <!-- <el-card v-if="callback" shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <span>返回结果</span>
      </div>
      {{ callback }}
    </el-card> -->    
  </div>
</template>

<script setup lang="ts">
import { FormInstance } from "element-plus";
import { createorder } from "@/api/demo";
import { list } from "@/api/other/merchant";

import { usePayProductStore } from "@/store";

(async () => {
  const proLists = await usePayProductStore().loadPayProducts();

  initDialogForm.value.initKeys[1].controlAttrs.options = proLists.map((item) => ({
    label: item.pro_name,
    value: item.pass_code,
  }));
})();

list({ limit: 9999, page: 1 }).then((res) => {
  initDialogForm.value.initKeys[0].controlAttrs.options = res.list.map((item) => ({
    label: item.mer_name,
    value: item.id,
  }));
});

let callback = ref();

let formDialogId = ref<FormInstance>();
let formDialogModel = ref({});
const initDialogForm = ref({
  // 表单标签位置
  formAttrs: {
    // 是否内联
    // inline: true,
    labelPosition: "top",
  },
  rowAttrs: {
    // 行内表单数量
    columnsNum: 2,
  },
  // 初始化表单字段
  initKeys: <any>[
    {
      // 类型
      type: "select-v2",
      // 唯一标识
      key: "mer_id",
      // 表单属性
      formAttrs: {
        label: "商户",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请选择商户",
        // 是否可清空
        clearable: true,
        filterable: true,
        options: [],
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "select-v2",
      // 唯一标识
      key: "pass_code",
      // 表单属性
      formAttrs: {
        label: "渠道编码",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请选择渠道编码",
        // 是否可清空
        clearable: true,
        filterable: true,
        options: [],
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "input-number",
      // 唯一标识
      key: "amount",
      // 表单属性
      formAttrs: {
        label: "订单金额",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请输入订单金额",
        // 是否可清空
        clearable: true,
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "buttons",
      // 按钮
      btns: [
        {
          // 文本
          text: "提交",
          // 控制属性
          controlAttrs: {
            // 类型
            type: "primary",
          },
          // 控制事件
          controlOn: {
            // 点击
            click: (e: Event, formRef: FormInstance, data: object) => {
              formRef.validate((valid) => {
                if (valid) {
                  let params = { ...data };

                  createorder(params).then((res) => {
                    ElMessage.success("下单成功");


                    window.open(res.request_url);
                  });
                }
              });
            },
          },
        },
        // {
        //   // 文本
        //   text: "重置",
        //   // 控制属性
        //   controlAttrs: {
        //     icon: "refresh",
        //   },
        //   // 控制事件
        //   controlOn: {
        //     // 点击
        //     click: resetQuery,
        //   },
        // },
      ],
    },
  ],
});
</script>

<style lang="scss" scoped>
.info-container {
  font-size: var(--el-font-size-extra-small);

  span {
    background-color: #1e9fff;
    display: inline-block;
    padding: 0 10px;
    margin: 0 5px;
    color: #fff;
  }
}
</style>
